<template>
  <Menu ref="sideMenu" :accordion="true" :active-name="activeName" :open-names="openNames" :theme="menuTheme" width="auto" @on-select="changeMenu" v-if="menuList">
    <template v-for="(item,index) in menuList">
      <MenuItem v-if="item.childPrivilege.length == 0" :name="item.url" :key="index">
        <Icon :type="item.style" :size="iconSize" :key="index"></Icon>
        <span class="layout-text" :key="item.id">{{ item.privilegeName }}</span>
      </MenuItem>

      <Submenu v-if="item.childPrivilege.length >= 1" :name="item.childPrivilege[0].url" :key="item.sortNo">
        <template slot="title">
          <Icon :type="item.style" :size="iconSize"></Icon>
          <span class="layout-text">{{ item.privilegeName }}</span>
        </template>
        <template v-for="(child,cI) in item.childPrivilege">
          <MenuItem :name="child.url" :key="child.sortNo">
            <Icon :type="child.style" :size="iconSize" :key="cI"></Icon>
            <span class="layout-text" :key="child.id">{{ child.privilegeName }}</span>
          </MenuItem>
        </template>
      </Submenu>
    </template>
  </Menu>
</template>

<script>
  export default {
    name: 'sidebarMenu',
    props: {
      menuList: Array,
      iconSize: Number,
      menuTheme: {
        type: String,
        default: 'light'
      },
      openNames: {
        type: Array
      }
    },
    data() {
      return {
        activeName:'',
      }
    },
    created(){
      this.activeName = this.$route.name;
    },
    methods: {
      changeMenu (active) {
        this.activeName = active;
        this.$emit('on-change', active);

      }
    },
    updated () {
      this.$nextTick(() => {
        if (this.$refs.sideMenu) {
          this.$refs.sideMenu.updateOpened();
        }
      });
    }

  };
</script>
<style scoped lang="scss">
  .ivu-shrinkable-menu{
    height: 100%;
    width: 100%;
  }
  .ivu-menu {
    text-align: left;
  }
</style>
